<template>
  <el-row class="warp">
    <el-col :span="24" class="warp-breadcrum">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }"><b>首页</b></el-breadcrumb-item>
        <b @click="openDialogEnable('menus')">菜单搜索</b>
      </el-breadcrumb>
    </el-col>
    <el-col>
      <el-carousel indicator-position="outside">
        <el-carousel-item v-for="(item, index) in ArrImagUrl" :key="index">
          <img :src="require('../assets/images/' + item)" />
        </el-carousel-item>
      </el-carousel>
    </el-col>
    <el-col>
      <el-row>
        <el-col>
          <img src="../assets/images/blue.png" alt="">
          <b style="font-size:xx-large;">
            平台公告
          </b>
        </el-col>
      </el-row>
    </el-col>
    <el-col>
      <el-table :data="fileRows" border size="large" v-loading="loading">
        <el-table-column label="文件名" prop="fileName"></el-table-column>
        <el-table-column label="创建日期" prop="createDate"></el-table-column>
        <el-table-column label="上传人" prop="uploader"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button @click="downloadFile(scope.row.id, scope.row.fileName)" size="mini" type="button">下载</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-col>
    <!-- <el-col>
      <el-row>
        <el-col :span="8" class="wrap-main">
          <el-row>
            <el-col :span="4">
              <img src="../assets/images/file.png" @click="openDialogEnable('myfile')">
            </el-col>
            <el-col :span="20">
              <h1 @click="openDialogEnable('myfile')">我的文件</h1>
            </el-col>
          </el-row>
        </el-col>

        <el-col :span="8" class="wrap-main">
          <el-row>
            <el-col :span="4">
              <img src="../assets/images/home.png" @click="openDialogEnable('menus')">
            </el-col>
            <el-col :span="20">
              <h1 @click="openDialogEnable('menus')">菜单搜索</h1>
            </el-col>
          </el-row>
        </el-col>

        <el-col :span="8" class="wrap-main">
          <el-row>
            <el-col :span="4">
              <img src="../assets/images/tool.png">
            </el-col>
            <el-col :span="20">
              <h1>其他工具</h1>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-col> -->
    <!-- 弹窗 -->
    <el-dialog title="我的文件" :visible.sync="myfileDialog" :close-on-click-modal="false">
      <el-row>
        <el-col>
          <el-form :inline="true" @submit.native.prevent>
            <el-form-item>
              <el-input placeholder="请输入文件名" v-model="getListName" @keyup.enter.native="getList(getListName)"
                suffix-icon="el-icon-search" size="large">
              </el-input>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col offset="8">
          <ul class="infinite-list" v-infinite-scroll="load" style="overflow:auto">
            <li v-for="i in fileRows" class="infinite-list-item" style=" list-style-type:none">
              <a href="" style="color:black">
                <h1>
                  <b>
                    {{ i.fileName }}
                  </b>
                </h1>
              </a>
            </li>
          </ul>
        </el-col>
      </el-row>
    </el-dialog>
    <el-dialog title="菜单搜索" :visible.sync="menusDialog" :close-on-click-modal="false">
      <el-row>
        <el-col>
          <el-form size="small" :inline="true" @submit.native.prevent>
            <el-form-item>
              <el-input placeholder="请输入菜单名" v-model="getMenuName" @keyup.enter.native="getMenuList(getMenuName)"
                suffix-icon="el-icon-search">
              </el-input>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col>
          <el-row>
            <ul class="infinite-list" v-infinite-scroll="load" style="overflow:auto">
              <li v-for="i in menuRows" class="infinite-list-item" style=" list-style-type:none">
                <el-col span="8">
                  <a :href="i.path" style="color:blue" :class="i.iconCls">{{ i.name }}</a>
                </el-col>
              </li>
            </ul>
          </el-row>

        </el-col>
      </el-row>

    </el-dialog>
  </el-row>
</template>

<script>
import API from '../api/api_file'
export default {
  name: "List",
  data() {
    return {
      limit: 10,
      page: 1,
      total: 0,
      fileRows: [],
      fileRowsBuff: [],
      uploadUrl: '',
      uploadData: {},
      uploadHeaders: { Authorization: '' },
      getListName: '',
      // 菜单搜索
      menuRows: [],
      getMenuName: '',
      //文件弹窗
      myfileDialog: false,
      menusDialog: false,
      // 图片位置
      ArrImagUrl: ["index1.jpg", "index2.jpg", "logo2.jpg"],
      //加载状态
      loading:true
    }
  },
  methods: {
    openDialogEnable(diaglogName) {
      if (diaglogName == 'myfile') {
        this.myfileDialog = true
      }
      if (diaglogName == 'menus') {
        this.menusDialog = true
      }
    },
    search: function (val) {
      let that = this
      let params = {
        limit: that.limit,
        page: val
      }
      this.page = val
      API.files(params).then(res => {
        if (res.code === 0) {
          that.fileRows = res.page.rows

          that.total = res.page.total
          that.loading = false
        }
      })
    },
    getMenuList(menus) {
      this.menuRows = []
      if (menus == '') {
        this.menuRows = this.$store.state.IndexMenus
      } else {
        for (let i = 0; i < this.$store.state.IndexMenus.length; i++) {
          if (this.$store.state.IndexMenus[i].name.indexOf(menus) > -1) {
            this.menuRows.push(this.$store.state.IndexMenus[i])
          }
        }
      }


    },
    getList: function () {
      let that = this
      API.getToken().then(res => {
        let token = res.token
        API.getList({ name: this.getListName, token: token }).then(res => {
          that.fileRows = res.page.rows
          that.total = res.page.total
        })
      }).catch(err => {
        console.log(err)
      })
      console.log(this.fileRows)
      console.log(this.getListName)
      if (!this.getListName) {
        console.log('执行了')
        this.search(1)

      }

    },
    beforeUpload: function () {
      let that = this
      return new Promise((resolve, reject) => {
        API.getToken().then(res => {
          let token = res.token
          let key = res.key
          that.uploadData = { token: token, key: key }
          that.uploadHeaders.Authorization = token
          that.uploadUrl = res.url
          resolve(true)
        })
        return {
          msg: '进入debug'
        }
      }).catch(err => {
        console.log(err)
        reject(false)
      })
    },
    removeFile: function (id) {
      let that = this
      this.$confirm('确定要删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        return API.remove({ id: id }).then(res => {
          if (res.code === 0) {
            that.$message.success(res.msg)
            that.search(this.page);
          }
        })
      })
    },
    downloadFile: function (id, nane) {
      console.log('这是name', nane)

      API.getToken().then(res => {
        let token = res.token
        console.log('这是权限', res)
        API.downLoad({ id: id, token: token }).then(res => {
          console.log('这是下载', res)
          if (res.status === 200) {
            console.log("下载成功")
            this.exportFile(res.data, nane)
            that.$message.success('成功')
          } else {
            console.log("下载失败")
          }
        });

      })

    },
    //文件下载
    exportFile: function (data, name) {

      // let url = window.URL.createObjectURL(new Blob([file]));

      // let link = document.createElement('a');

      // link.style.display = 'none';

      // link.href = url;

      // link.setAttribute('download', name);

      // document.body.appendChild(link);

      // link.click();

      // document.body.removeChild(link); // 下载完成移除元素

      // window.URL.revokeObjectURL(url); // 释放掉blob对象
      try {
        const blobUrl = window.URL.createObjectURL(new Blob([data]), { type: 'image/png' })
        const a = document.createElement('a')
        a.style.display = 'none'
        a.download = name
        a.href = blobUrl
        a.click()

      } catch (e) {
        alert('保存文件出错')
      }
    },
    onSuccess: function () {
      this.search(this.page)
    }
  },
  mounted() {
    this.search(1);
    this.getMenuList('')
  }
}
</script>

<style scoped>
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel_item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel_item:nth-child(2n+1) {
  background-color: #d3dce6;
}
</style>
